import React from 'react';
import { RadioProps } from './Radio';

export type RadioValueType = string | number | readonly string[];
export type RadioSizeType = 'large' | 'middle' | 'small';
export type RadioType = 'default' | 'button' | 'slider';
export type RadioSliderType = 'outline' | 'solid';

export interface RadioGroupSlider {
    left: string | number | undefined,
    width: string | number | undefined
}

export interface RadioGroupOptions {
    label: RadioValueType,
    value: RadioValueType,
    disabled?: boolean,
    style?: React.CSSProperties
}

export interface RadioChangeEventTarget extends RadioProps {
    checked: boolean;
}

export interface RadioChangeEvent {
    target: RadioChangeEventTarget;
    stopPropagation: () => void;
    preventDefault: () => void;
}

export interface RadioGroupProps extends RadioProps {
    name?: string;
    defaultValue?: string | number;
    size?: RadioSizeType;
    options?: Array<RadioGroupOptions | string | number>;
    type?: RadioType;
    sliderStyle?: RadioSliderType;
    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
    onFocus?: React.FocusEventHandler<HTMLDivElement>;
    onBlur?: React.FocusEventHandler<HTMLDivElement>;
}

export interface RadioGroupContextProps {
    onChange?: (e: RadioChangeEvent) => void;
    currentTarget?: (e: RadioGroupSlider) => void;
    value?: RadioValueType;
    disabled?: boolean;
    name?: string;
    type?: RadioType;
    sliderStyle?: RadioSliderType;
}